<template>
  <div>
    <div style="height: 633px;">

<!--      <div style="position: fixed;">-->
      <div style="overflow: auto;width: 1200px;height: 600px;position: fixed;">
        <div style="width: 1445px;height: 800px;">
          <img :src="pmtUrl" style="width: 1445px;height: 800px;">
          <VueDragResize v-for="pointParam in pointParamList" :key="pointParam.id" :isActive="true"
                         v-on:dragging="resize"
                         v-on:dragstop="dragstop(pointParam)"
                         :isResizable="false"
                         :x="parseInt(pointParam.gyx)"
                         :y="parseInt(pointParam.gyy)">
            <div>
              <div v-if="pointParam.paramInfo.paramType === 'num'" style="color: #157a0c;">数值</div>
              <div v-if="pointParam.paramInfo.paramType === 'state'" style="color: #157a0c;">
                <img :src="stateLv" style="width: 23px;height: 23px;"/>
              </div>
              <div v-if="pointParam.paramInfo.paramType === 'fault'" style="color: #157a0c;">
                <img :src="faultLv" style="width: 40px;height: 40px;"/>
              </div>
              <div v-if="pointParam.paramInfo.paramType === 'crol'" style="color: #157a0c;">
                <img :src="crolLv" style="width: 30px;height: 30px;"/>
              </div>
              {{pointParam.paramInfo.name}}
            </div>

          </VueDragResize>
        </div>
      </div>
    </div>

<!--    </div>-->
    <div slot="footer" class="dialog-footer">
<!--      <el-button type="primary" @click="saveLonLat">保 存</el-button>-->
    </div>
  </div>
</template>

<script>
  import { queryPointParams,updateGyxy } from "@/api/basic/pointParam";
  import VueDragResize from 'vue-drag-resize';

export default {
  components: {
    VueDragResize
  },
  props: {
    collectPoint: {
      type: Object
    }
  },
  data() {
    return {
      stateHui:require('@/assets/image/state_hui.png'),
      stateLv:require('@/assets/image/state_lv.png'),
      faultHui:require('@/assets/image/fault_hui.png'),
      faultLv:require('@/assets/image/fault_lv.png'),
      crolHui:require('@/assets/image/crol_hui.png'),
      crolLv:require('@/assets/image/crol_lv.png'),
      pic:require('@/assets/image/area.png'),
      pmtUrl:require('@/assets/image/pmt.png'),
      pointParamList:[],
      form: {},
      top: 0,
      left: 0
    };
  },
  created() {
    this.pmtUrl = this.collectPoint.gypic;
    this.getPointParams();
  },
  methods: {
    getPointParams() {
      queryPointParams({pointId:this.collectPoint.id,isgy:'Y'}).then(response => {
        this.pointParamList = response.data;
      });
    },
    resize(newRect) {
      this.top = newRect.top;
      this.left = newRect.left;
    },
    dragstop(pointParam){
      let obj = {
        id:pointParam.id,
        gyx:this.left,
        gyy:this.top
      }
      updateGyxy(obj).then(response => {
        if (response.code === 200) {
          // this.msgSuccess("保存成功");
        }
      });
    },
  }

}
</script>

